<template>
  <div class="grid grid-cols-4 gap-4 p-4">
    <div 
      v-for="feature in bigFeatures" 
      :key="feature.id" 
      class="bg-primary text-white p-6 rounded-lg hover:shadow-lg transition-shadow"
    >
      <h2 class="text-xl font-bold mb-2">{{ feature.title }}</h2>
      <p class="text-sm mb-4">{{ feature.desc }}</p>
      <button class="bg-white text-primary px-4 py-2 rounded hover:bg-gray-100 transition-colors">
        开始生图
      </button>
    </div>
  </div>
</template>

<script setup>
const bigFeatures = [
  { id: 1, title: 'Stable Diffusion', desc: '精选国风AI大模型，画面自由可控' },
  { id: 2, title: 'Midjourney', desc: '多风格参考生成，爆肝美学表现力' },
  { id: 3, title: 'GPT-Image', desc: '自然语言生图，入门必选模型' },
  { id: 4, title: 'Kontext', desc: '一句话精准出图，角色一致性强' },
];
</script>